import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    id: root
    width: Screen.width > 1000 ? 1600 : 800
    height: Screen.height > 1000 ? 1000 : 900
    visible: true
    title: "3D 图片轮播"
    
    readonly property real scaleFactor: width > 1000 ? 1.8 : 1.5
    
    // 状态文本
    property string statusText: "3D 图片轮播就绪"
    
    ColumnLayout {
        anchors.fill: parent
        spacing: 12 * scaleFactor
        anchors.margins: 12 * scaleFactor
        
        // 状态标签
        Text {
            Layout.fillWidth: true
            Layout.preferredHeight: 50 * scaleFactor
            text: root.statusText
            font.pixelSize: 20 * scaleFactor
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            color: "#333333"
            Rectangle {
                anchors.fill: parent
                border.color: "#CCCCCC"
                border.width: 1
                color: "transparent"
            }
        }
        
        // 轮播视图区域
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#1A1A1A"
            border.color: "#CCCCCC"
            border.width: 2
            
            Carousel3DView {
                id: carouselView
                anchors.fill: parent
                anchors.margins: 10 * scaleFactor
                animationDuration: animationDurationSlider.value
                autoRotationInterval: rotationIntervalSlider.value
                autoRotationEnabled: true  // 默认启用
            }
        }
        
        ScrollView {
            Layout.fillWidth: true
            Layout.preferredHeight: 300 * scaleFactor
            
            ColumnLayout {
                width: parent.width
                spacing: 12 * scaleFactor
                
                // 基本控制按钮
                RowLayout {
                    Layout.fillWidth: true
                    spacing: 12 * scaleFactor
                    
                    Button {
                        text: "上一个"
                        Layout.fillWidth: true
                        Layout.preferredHeight: 50 * scaleFactor
                        font.pixelSize: 18 * scaleFactor
                        onClicked: {
                            carouselView.rotateToPrevious()
                            statusText = "正在旋转到上一个项目..."
                            statusTimer.restart()
                        }
                    }
                    
                    Button {
                        text: "下一个"
                        Layout.fillWidth: true
                        Layout.preferredHeight: 50 * scaleFactor
                        font.pixelSize: 18 * scaleFactor
                        onClicked: {
                            carouselView.rotateToNext()
                            statusText = "正在旋转到下一个项目..."
                            statusTimer.restart()
                        }
                    }
                }
                
                // 动画持续时间控制
                GridLayout {
                    Layout.fillWidth: true
                    columns: 2
                    columnSpacing: 12 * scaleFactor
                    rowSpacing: 12 * scaleFactor
                    
                    Text {
                        id: durationLabel
                        text: "动画时长: " + animationDurationSlider.value + " 毫秒"
                        font.pixelSize: 18 * scaleFactor
                        Layout.preferredWidth: 150 * scaleFactor
                    }
                    
                    Slider {
                        id: animationDurationSlider
                        from: 200
                        to: 2000
                        value: 800
                        Layout.fillWidth: true
                        Layout.preferredHeight: 45 * scaleFactor
                        onValueChanged: {
                            durationLabel.text = "动画时长: " + Math.round(value) + " 毫秒"
                            carouselView.animationDuration = Math.round(value)
                        }
                    }
                    
                    // 自动轮播间隔控制
                    Text {
                        id: intervalLabel
                        text: "轮播间隔: " + rotationIntervalSlider.value + " 毫秒"
                        font.pixelSize: 18 * scaleFactor
                        Layout.preferredWidth: 150 * scaleFactor
                    }
                    
                    Slider {
                        id: rotationIntervalSlider
                        from: 500
                        to: 5000
                        value: 2000
                        Layout.fillWidth: true
                        Layout.preferredHeight: 45 * scaleFactor
                        onValueChanged: {
                            intervalLabel.text = "轮播间隔: " + Math.round(value) + " 毫秒"
                            carouselView.autoRotationInterval = Math.round(value)
                        }
                    }
                    
                }
                
                // 自动轮播控制按钮
                RowLayout {
                    Layout.fillWidth: true
                    spacing: 12 * scaleFactor
                    
                    Button {
                        text: "开始"
                        Layout.fillWidth: true
                        Layout.preferredHeight: 50 * scaleFactor
                        font.pixelSize: 18 * scaleFactor
                        onClicked: {
                            carouselView.startAutoRotation()
                            statusText = "开始播放（循环）"
                            statusTimer.restart()
                        }
                    }
                    
                    Button {
                        text: "停止"
                        Layout.fillWidth: true
                        Layout.preferredHeight: 50 * scaleFactor
                        font.pixelSize: 18 * scaleFactor
                        onClicked: {
                            carouselView.stopAutoRotation()
                            statusText = "播放已停止"
                            statusTimer.restart()
                        }
                    }
                }
            }
        }
    }
    
    // 状态清除定时器
    Timer {
        id: statusTimer
        interval: 1500
        running: false
        repeat: false
        onTriggered: {
            statusText = "3D 图片轮播就绪"
        }
    }
    
    Component.onCompleted: {
        // 同步初始状态
        animationDurationSlider.value = carouselView.animationDuration
        rotationIntervalSlider.value = carouselView.autoRotationInterval
        // 不自动开始播放，需要用户点击"开始"按钮
    }
}
